<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2024-12-20 18:02:17
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-08-22 18:14:36
 * @FilePath: /XMate-h5/src/views/myXmate/components/customerListRow.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bg-gradient-to-b from-yxt-blue-50 to-white rounded-xl p-4">
    <div class="flex flex-row mb-4">
      <img
        class="w-[44px] h-[44px] rounded-md mr-4 border-[0.5px] border-gray-300 border-solid"
        :src="item.companyLogoUrl || defaultLogoUrl"
      />
      <div class="flex flex-col w-full">
        <div class="flex flex-row justify-between items-start">
          <van-text-ellipsis
            class="font-bold break-words flex-1 mr-2"
            :content="item.name"
          />
          <div
            v-if="item.riskCount > 0"
            class="flex flex-row items-center bg-[#FDF5CD] px-2 rounded-sm flex-shrink-0"
          >
            <img src="@/icons/svg/myXmate/warning.svg" class="mr-1" />
            {{ item.riskCount }}
          </div>
        </div>
        <div>{{ item.tags }}</div>
      </div>
    </div>

    <div class="flex flex-row justify-between p-4 rounded-lg items-center bg-white">
      <div
        class="flex flex-col items-center"
        v-for="item in visitorInfos"
        :key="item.title"
      >
        <div class="flex flex-row">
          <p class="text-base text-[#595959] font-bold mr-[1px]">
            {{ item.value }}
          </p>
          <p class="text-xs text-[#595959] mt-[6px]">{{ item.unit }}</p>
        </div>
        <p class="text-[#8C8C8C] text-xs mt-1">{{ item.title }}</p>
      </div>
    </div>
    <!-- <div class="flex flex-row items-center mt-3">
      <van-icon name="friends-o" color="#8C8C8C" />
      <p class="text-xs text-[#8C8C8C] ml-1">销售负责人: {{ item.hostNames }}</p>
    </div> -->
  </div>
</template>

<script setup>
import { defineProps, computed } from "vue";

const defaultLogoUrl =
  "https://meetcdn.yxt.com/lingxi-static-resources/img/default_company_logo.svg";

const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const visitorInfos = computed(() => {
  let array = [];
  array.push({
    title: "沟通次数",
    value: props.item.meetCount,
    unit: "次",
  });
  array.push({
    title: "参会人数",
    value: props.item.attendeeCount,
    unit: "个",
  });
  array.push({
    title: "提及竞对",
    value: props.item.competitorCount,
    unit: "次",
  });
  array.push({
    title: "总待办",
    value: props.item.todosCount,
    unit: "个",
  });
  return array;
});
</script>

<style lang="less" scoped>
// .gray-bg {
//     background: linear-gradient( 180deg, #F0F6FE 0%, #FFFFFF 100%);
// }
</style>
